<template>
  <a-table v-bind="options.bind" v-on="options.vOn" ref="table">
    <template v-for="(value, key) in $slots" #[key]="slotProps" :key="key">
      <slot :name="key" v-bind="slotProps"></slot>
    </template>
  </a-table>
</template>
<script setup>
import { ref, onMounted } from "vue";
const table = ref(null);
const props = defineProps({
  options: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  inintTableSize();
});
const inintTableSize = () => {
  const dom = table.value.$el;
  const tableBody = dom.querySelectorAll(".ant-table-body");
  const tablePlaceholder = dom.querySelectorAll(".ant-table-placeholder");
  const height = dom.parentElement.clientHeight - 105;
  props.options.bind.scroll.y = height;
  tableBody[0].style.height = height + "px";
  if (tablePlaceholder[0]) {
    tablePlaceholder[0].style.height = height + "px";
  }
};
</script>
<script>
export default {
  name: "MsuiDatagrid",
};
</script>
<style scoped>
::v-deep .ant-table-body {
  border-bottom: 1px solid #f0f0f0;
}
::v-deep .table-striped {
  background-color: #fafafa;
}
</style>
